<template>
	<view class="container">
		<!-- 分类tab -->
		<view class="header">
			<scroll-view scroll-x :scroll-left="0" style="height: 100%;">
				<view class="cs" :class="{ active: category_id == 0 }" @tap="onSwitchTab" data-id="0"><text>全部</text></view>
				<!-- 分类列表 -->
				<view class="cs" :class="{ active: item.category_id == category_id }" @tap="onSwitchTab" v-for="(item, index) in categoryList" :key="index" :data-id="item.category_id">
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
		</view>

		<!-- 文章列表 -->
		<view class="article-list">
			<scroll-view @scrolltolower="bindDownLoad" scroll-y :style="{ height: scrollHeight + 'px' }">
				<view :class="'article-item show-type__' + item.show_type" v-for="(item, index) in articleList.data" :key="index" @tap="onTargetDetail" :data-id="item.article_id">
					<!-- 小图模式 -->
					<block v-if="item.show_type == 10">
						<view class="article-item__left flex-box">
							<view class="article-item__title twolist-hidden">
								<text class="dis-block f-30 col-3">{{ item.article_title }}</text>
							</view>
							<view class="article-item__footer m-top10">
								<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
							</view>
						</view>
						<view class="article-item__image"><image mode="widthFix" :src="item.image.file_path"></image></view>
					</block>
					<!-- 大图模式 -->
					<block v-if="item.show_type == 20">
						<view class="article-item__title twolist-hidden">
							<text class="dis-block f-30 col-3">{{ item.article_title }}</text>
						</view>
						<view class="article-item__image m-top20"><image mode="widthFix" :src="item.image.file_path"></image></view>
						<view class="article-item__footer m-top10">
							<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
						</view>
					</block>
				</view>
				<view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
				<!-- 无数据提供的页面 -->
				<view v-if="!isLoading && !articleList.data.length">
					<view class="yoshop-notcont">
						<text class="suifont sui-wushuju"></text>
						<text class="cont">亲，暂无内容哦</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 分类列表
			categoryList: [],
			// 文章列表
			articleList: [],
			// 当前的分类id (0则代表首页)
			category_id: 0,

			scrollHeight: null,

			no_more: false, // 没有更多数据
			isLoading: true, // 是否正在加载中
			page: 1 // 当前页码
		};
	},
	onLoad() {
		this.setListHeight();
		this.getIndexData();
	},
	methods: {
		/**
		 * 设置文章列表高度
		 */
		setListHeight() {
			let systemInfo = uni.getSystemInfoSync();
			let tapHeight = uni.upx2px(98); // tap高度
			let scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
			this.scrollHeight = scrollHeight;
		},
		/**
		 * Api：获取文章列表
		 */
		getIndexData() {
			this.$u.api.getArticleCate().then(res => {
				this.categoryList = res.data.categoryList;
			});
			this.getArticleList();
		},
		/**
		 * Api：切换导航栏
		 */
		onSwitchTab: function(e) {
			// 第一步：切换当前的分类id
			this.category_id = e.currentTarget.dataset.id;
			this.articleList = {};
			this.page = 1;
			this.no_more = false;
			this.isLoading = true;

			// 第二步：更新当前的文章列表
			this.getArticleList();
		},

		/**
		 * Api：获取文章列表
		 */
		getArticleList(isPage, page) {
			this.$u.api.getArticleList({ page: page || 1, category_id: this.category_id }).then(res => {
				let resList = res.data.list;
				let dataList = this.articleList;
				if (isPage == true) {
					this.$set(this.articleList, 'data', dataList.data.concat(resList.data));
					this.isLoading = false;
				} else {
					this.articleList = resList;
					this.isLoading = false;
				}
			});
		},
		/**
		 * 下拉到底加载数据
		 */
		bindDownLoad() {
			// 已经是最后一页
			if (this.page >= this.articleList.last_page) {
				this.no_more = true;
				return false;
			}
			// 加载下一页列表
			this.getArticleList(true, ++this.page);
		},
		/**
		 * 跳转文章详情页
		 */
		onTargetDetail(e) {
			this.navigateTo({
				url: '/pageSupport/article/detail/index?article_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style lang="scss">
/* 顶部选项卡 */

.header {
	display: flex;
	position: fixed;
	top: var(--window-top);
	width: 100%;
	height: 88rpx;
	color: #333;
	font-size: 28rpx;
	background: #fff;
	border-bottom: 1rpx solid #e4e4e4;
	z-index: 100;
	overflow: hidden;
	white-space: nowrap;
}

.header .cs {
	display: inline-block;
	padding: 0 15rpx;
	text-align: center;
	min-width: 20%;
	height: 87rpx;
	line-height: 88rpx;
	box-sizing: border-box;
}

.header .cs text {
	display: block;
	height: 100%;
}

.header .cs.active text {
	color: #fd4a5f;
	border-bottom: 2rpx solid #fd4a5f;
}

/* 文章列表 */

.article-list {
	margin-top: 98rpx;
	line-height: 1;
	/* padding: 0 20rpx; */
}

.article-list .article-item {
	margin-bottom: 20rpx;
	padding: 30rpx;
	background: #fff;
}

.article-list .article-item:last-child {
	margin-bottom: 0;
}

.article-list .article-item .article-item__title {
	line-height: 1.3;
}

.article-list .article-item .article-item__image image {
	display: block;
}

/* 小图模式 */

.show-type__10 {
	display: flex;
}

.show-type__10 .article-item__left {
	padding-right: 20rpx;
}

.show-type__10 .article-item__image image {
	width: 240rpx;
}

/* 大图模式 */

.show-type__20 .article-item__image image {
	width: 100%;
}
</style>
